<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document - 练习 - 使用全局构建版本</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello World {{ name }}</h1>
            <p>使用全局构建版本</p>
            <button type="button" @click="changeName">Change Name</button>
        </div>

        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <script lang="ts" setup>
            const { ref, createApp } = Vue;
            const name = ref('AliYun');

            const changeName = () => {
                name.value = getRandomName();
                console.log(Date.now().toString().slice(-3), name.value);
            }

            const getRandomName = () => {
                const names = ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank'];
                return names[Math.floor(Math.random() * names.length)];
            }

            const app = createApp({
                setup() {
                    return {
                        name,
                        changeName,
                    };
                }
            });
            app.mount('#app');
        </script>
    </body>
</html>